<template>
  <div id="app">
    <!-- <img src="./assets/img/3.png" alt=""> -->
    <!-- <div class="theme"></div> -->
    <div class="header">
      <img src="./assets/img/music1.png" alt="" />
      <i>轻音乐Relaxing</i>
    </div>
    <div class="area">
      <TopNav v-if="!$route.meta.hideHead"></TopNav>
      <Play :playMusice="playMusice" 
            :songMenu="songMenu" 
            @play="changeMusic"
            @del="del"
            v-if="playMusice"
            >
      </Play>
      <transition
        enter-active-class="animate__animated animate__backInDown"
        leave-active-class="animate__animated animate__backOutDown"
      >
        <router-view @play="playMusic"></router-view>
      </transition>
    </div>
    <div class="bottom" v-if="playMusice"></div>
  </div>
</template>
<script>
import TopNav from "@/components/TopNav";
import Play from "@/components/Play";
export default {
  data() {
    return {
      musicID: null,
      playMusice: null,
      songMenu: [],
    };
  },
  components: {
    TopNav,
    Play,
  },
  methods: {
    changeMusic(e) {
      console.log(e);
      this.playMusice = e;
      // console.log('===>',this.playMusice);
    },
    playMusic(musice) {
      // this.musicID=e;
      // console.log(musice);
      if (!musice.picUrl) {
        if (musice.al && musice.al.picUrl) {
          musice.picUrl = musice.al.picUrl;
        } else {
          musice.picUrl =
            "http://p1.music.126.net/0QYCXHgm_WUT6Qc5haI7EQ==/109951165813544165.jpg";
        }
      }
      if (musice.song && musice.song.artists) {
        musice.artists = musice.song.artists;
      }

      this.playMusice = musice;

      let exit = false;
      //判断加入的歌曲 原来列表是否存在，如果存在则不能加入播放列表
      for (let i = 0; i < this.songMenu.length; i++) {
        if (this.songMenu[i].id == musice.id) {
          exit = true;
          break;
        }
      }
      if (!exit) {
        this.songMenu.push(musice);
        // console.log(this.songMenu);
      }
    },
    del(del){
     this.songMenu = del
    }
  },
};
</script>

<style lang='less' scoped>
#app {
  position: absolute;
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: linear-gradient(to top, rgb(121, 218, 171), rgb(65, 160, 114));
    position: fixed;
    top: 0;
    z-index: 10;
    img {
      // position: absolute;
      width: 50px;
      height: 50px;
      vertical-align: middle;
      margin: 0 10px;
    }
    i{
      font-style: italic;
      font-size: 22px;
      color: #fff;
    }
  }
  .area {
    margin-top: 100px;
    // padding-top: 40px;
    // background-image: url(./assets/img/3.png);
    // filter: blur(5px);
    // z-index: 100;
  }
  .bottom {
    padding-top: 50px;
  }
}
</style>
